<template>
	  <div class="q-pa-md">
		<q-card class="my-card" flat bordered>
			<q-card-section horizontal>
				<q-img
					class="col"
					src="http://127.0.0.1:8000/api/screenshot/"
					width="100%"
				/>
				

				<q-card-actions vertical class="justify-around q-px-md">
					<q-btn
						flat round
						color="secondary"
					    @click="$q.fullscreen.toggle()"
						:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
					/>
					<q-btn flat round color="red" icon="favorite" />
					<q-btn flat round color="accent" icon="bookmark" />
					<q-btn flat round color="primary" icon="share" />
				</q-card-actions>
			</q-card-section>
		</q-card>
	</div>
</template>

<script>
import { ref } from 'vue'
import { useQuasar } from 'quasar'

export default {
	
	setup () {
		// const $q = useQuasar()		
		return {
			tab: ref('one')
		}
	}


}
</script>

<style lang="sass" scoped>
.my-card
  width: 100%
</style>
